<template>
  <div>
    <van-tabs v-model:active="active">
      <van-tab title="代表连心桥">
        <van-row>
          <van-col span="6">
            <van-sidebar v-model="street">
              <van-sidebar-item title="南京东路街道" value="1" @click="onShowData(1)"/>
              <van-sidebar-item title="外滩街道"  value="2" @click="onShowData(2)"/>
              <van-sidebar-item title="瑞金二路街道" value="3"  @click="onShowData(3)"/>
              <van-sidebar-item title="淮海中路街道"  value="4" @click="onShowData(4)"/>
              <van-sidebar-item title="豫园街道"  value="5" @click="onShowData(5)"/>
              <van-sidebar-item title="打浦桥街道"  value="6" @click="onShowData(6)"/>
              <van-sidebar-item title="老西门街道"  value="7" @click="onShowData(7)"/>
              <van-sidebar-item title="小东门街道"  value="8" @click="onShowData(8)"/>
              <van-sidebar-item title="五里桥街道"  value="9" @click="onShowData(9)"/>
              <van-sidebar-item title="半淞园路街道"  value="10" @click="onShowData(10)"/>
            </van-sidebar></van-col>

          <van-col span="18" style="padding-top: 20px;padding-right: 10px;">
            <van-image
                @click="onShowIma(imgUrl)"
                :src="imgUrl"
            />
            <van-collapse v-model="activeNames">
              <van-collapse-item :title="(index+1) +'.'+ item.name" :name="index" v-for="(item,index) in list" :key="item.name">
                <van-row justify="start">
                  <van-col span="24" style="text-align: left;color:#333">邮箱：{{ item.data.email }}</van-col>
                  <!--                  <van-col span="14"  class="text-right">{{ item.data.email }}</van-col>-->
                </van-row>
                <van-row justify="start" >
                  <van-col span="24" style="text-align: left;color:#333">电话：<a :href="'tel:'+item.data.phone">{{ item.data.phone }}</a></van-col>
                  <!--                  <van-col span="14" class="text-right"><a :href="'tel:'+item.data.phone">{{ item.data.phone }}</a></van-col>-->
                </van-row>
                <van-row justify="start">
                  <van-col span="24" style="text-align: left;color:#333">联系地址：{{ item.data.addr }}</van-col>
                  <!--                  <van-col span="14" class="text-right">{{ item.data.addr }}</van-col>-->
                </van-row>

              </van-collapse-item>

            </van-collapse></van-col>
        </van-row>


      </van-tab>
      <van-tab title="民意直通车">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
                v-model="form.name"
                label="姓名"
                name="name"
                placeholder="姓名"
                :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <van-field
                v-model="form.mail"
                type="text"
                label="电子邮箱"
                name="mail"
                placeholder="电子邮箱"
                :rules="[{ required: false, message: '请填写电子邮箱' }]"
            />
            <van-field
                v-model="form.phone"
                type="text"
                label="电话"
                name="phone"
                placeholder="电话"
                :rules="[{ required: true, message: '请填写电话' }]"
            />
            <van-field
                v-model="form.zipcode"
                type="text"
                label="邮编"
                name="zipcode"
                placeholder="邮编"
                :rules="[{ required: false, message: '请填写邮编 ' }]"
            />
            <van-field
                v-model="form.tableText"
                is-link
                readonly
                name="tableText"
                label="选择街道"
                placeholder="点击选择街道"
                @click="showPicker = true"
            />

            <van-field
                v-model="sms"
                center
                name="sms"
                clearable
                label="文字验证码"
                placeholder="请区分大小写"
            >
              <template #button>
                <canvas id="canvas" ref="root"  width="90" height="35" @click="handleClick"></canvas>
              </template>
            </van-field>
            <van-field
                v-model="form.address"
                type="text"
                name="address"
                label="联系地址"
                placeholder="联系地址"
                :rules="[{ required: false, message: '请填写联系地址' }]"
            />
            <van-field
                v-model="form.title"
                type="text"
                label="标题"
                name="title"
                placeholder="标题"
                :rules="[{ required: false, message: '请填写标题' }]"
            />
            <van-field
                v-model="form.info"
                type="textarea"
                label="意见建议"
                name="info"
                placeholder="意见建议"
                :rules="[{ required: true, message: '请填写意见建议' }]"
            />


          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
          />
        </van-popup>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import { ref ,onMounted } from 'vue';
import { ImagePreview,Toast } from 'vant';
import axios from 'axios'
import ImageVerify from "../assets/code";
import configManager from '../utils/config';
export default {
  setup() {
    onMounted(() => {
      setTimeout(()=>{
        condeTupian.value = new ImageVerify({
          id: 'canvas',
          width: 90,
          height: 35,
        });
        active.value = 0
        onShowData(1)
      },100)

    })
    const result = ref('');
    const street = ref('');
    const root = ref(null)
    const list = ref([])
    const sms = ref('')
    const imgUrl = ref('')
    const imgList = ref([])
    const formData = {
      name:"",
      mail:"",
      tableId:'',
      tableText:'',
      phone:'',
      zipcode:'',
      address:"",
      title:"",
      info:"",
    }
    const active = ref(1);
    const form = ref(Object)
    form.value = formData
    // TODO 这里 第几个街道 就是第几张图片
    const imagePaths = [
      "/picture/nandong.png",
      "/picture/waitan.jpeg", 
      "/picture/ruijin.jpg",
      "/picture/huaihai.jpg",
      "/picture/yuyuan.png",
      "/picture/dapu.png",
      "/picture/laoximen.jpg",
      "/picture/xiaodongmen.jpg",
      "/picture/wuli.png",
      "/picture/bansong.png"
    ];
    
    // 初始化图片列表
    const initImageList = async () => {
      const ossBaseUrl = await configManager.getOssBaseUrl();
      imgList.value = imagePaths.map(path => `${ossBaseUrl}${path}`);
    };
    
    initImageList();
    const activeNames = ref(['1']);
    const columns = [ // TODO 这里 数据库叫什么 value添什么
      {text:'南京东路街道',value:'njdl_jiedao'},
      {text:'外滩街道',value:'wt_jiedao'},
      {text:'淮海中路街道',value:'hhzl_jiedao'},
      {text:'豫园街道',value:'yy_jiedao'},
      {text:'打浦桥街道',value:'dpq_jiedao'},
      {text:'老西门街道',value:'lxm_jiedao'},
      {text:'小东门街道',value:'xdm_jiedao'},
      {text:'五里桥街道',value:'wlq_jiedao'},
      {text:'半淞园路街道',value:'bsyl_jiedao'},
      {text:'瑞金二路街道',value:'rjel_jiedao'}];
    const showPicker = ref(false);
    list.value = []
    // TODO 这里 哪几条数组是一起的type就是什么 根据索引来
    const dataAll =[
      {
        name: "南京东路人大代表之家",
        type:1,
        data: {"email": "njdrdgw@163.com", "phone": "63272475", "addr": "凤阳路286号三楼"},
      },
      {
        name: "南京东路街道人大代表联络站（华鑫海欣）",
        type:1,
        data: {"email": "njdrdgw@163.com", "phone": "63272475", "addr": "福州路666号12楼CD"},
      },
      {
        name: "南京东路步行街商圈人大代表联络站",
        type:1,
        data: {"email": "njdrdgw@163.com", "phone": "63272475", "addr": "南京东路486弄11号"},
      },
      {
        name: "第1选区代表联系点",
        type:1,
        data: {"email": "njdrdgw@163.com", "phone": "63274157", "addr": "大沽路183弄9-13号"},
      },
      {
        name: "第2选区代表联系点",
        type:1,
        data: {"email": "njdrdgw@163.com", "phone": "63274158", "addr": "大沽路258号104室"},
      },
      {
        name: "第3选区代表联系点",
        type:1,
        data: {"email": "njdrdgw@163.com", "phone": "63278452、63270706", "addr": "成都北路262弄130号"},
      },
      {
        name: "第4选区代表联系点",
        type:1,
        data: {"email": "njdrdgw@163.com", "phone": "33110053", "addr": "江阴路105弄22号后门（从重庆北路328弄进入）"},
      },
      {
        name: "第5选区代表联系点",
        type:1,
        data: {"email": "njdrdgw@163.com", "phone": "63726736、63279465", "addr": "黄河路107弄64号"},
      },
      {
        name: "第6选区代表联系点",
        type:1,
        data: {"email": "njdrdgw@163.com", "phone": "63273241、63273142", "addr": "新昌路455弄20号"},
      },
      {
        name: "第7选区代表联系点",
        type:1,
        data: {"email": "njdrdgw@163.com", "phone": "63273227", "addr": "黄河路253弄116号前门"},
      },
      {
        name: "第8、13选区代表联系点",
        type:1,
        data: {"email": "njdrdgw@163.com", "phone": "63517574、63728988、63271440", "addr": "黄河路333号"},
      },
      {
        name: "第9选区代表联系点",
        type:1,
        data: {"email": "njdrdgw@163.com", "phone": "63128587、63520624", "addr": "北京东路850弄22号"},
      },
      {
        name: "第10、12选区代表联系点",
        type:1,
        data: {"email": "njdrdgw@163.com", "phone": "63274158、63222524", "addr": "贵州路71弄10号"},
      },
      {
        name: "第11选区代表联系点",
        type:1,
        data: {"email": "njdrdgw@163.com", "phone": "53531272、63221387", "addr": "浙江中路188弄7号P室"},
      },
      {
        name: "外滩街道人大代表之家",
        type:2,
        data: {"email": "56113633@qq.com", "phone": "63226660", "addr": "宁波路120弄18号105室"},
      },
      {
        name: "外滩中心代表联络站",
        type:2,
        data: {"email": "zhyxz@zhylawyer.com", "phone": "53098000", "addr": "延安东路222号37楼"},
      },
      {
        name: "国拍行代表联络站",
        type:2,
        data: {"email": "jingzhili@alltobid.com", "phone": "63392222", "addr": "福州路108号"},
      },
      {
        name: "第一片区代表联系点",
        type:2,
        data: {"email": "wjdbs28@163.com", "phone": "63292047", "addr": "河南中路531弄24号"},
      },
      {
        name: "第二片区代表联系点",
        type:2,
        data: {"email": "wjdsxjw@163.com", "phone": "63224564", "addr": "汉口路429弄7号"},
      },
      {
        name: "第三片区代表联系点",
        type:2,
        data: {"email": "wjdbxjw@163.com", "phone": "63280751", "addr": "金陵东路443号"},
      },
      {
        name: "第四片区代表联系点",
        type:2,
        data: {"email": "beijingjuweihui@163.com", "phone": "63210629", "addr": "北京东路288弄80号"},
      },
      {
        name: "第五片区代表联系点",
        type:2,
        data: {"email": "nbjw120101@sina.com", "phone": "63212211", "addr": "宁波路120弄24号"},
      },
      {
        name: "第六片区代表联系点",
        type:2,
        data: {"email": "wjdzs150@sina.com", "phone": "63210636", "addr": "河南中路142号"},
      },
      {
        name: "淮海代表之家",
        type:4,
        data: {"email": "hhrdgw@163.com", "phone": "53867159", "addr": "合肥路398号一楼"},
      },
      {
        name: "新天地商圈代表联络站",
        type:4,
        data: {"email": "hhrdgw@163.com", "phone": "53867159", "addr": "复兴中路360号 地铁站1号口"},
      },
      {
        name: "兰生大厦代表联络站",
        type:4,
        data: {"email": "hhrdgw@163.com", "phone": "53867159", "addr": "淮海中路8号13楼"},
      },
      {
        name: "40选区代表联系点",
        type:4,
        data: {"email": "hhrdgw@163.com", "phone": "63852550", "addr": "大华活动室（自忠路15弄6号）"},
      },
      {
        name: "41选区代表联系点",
        type:4,
        data: {"email": "hhrdgw@163.com", "phone": "63848904", "addr": "复三活动室（淡水路332弄9号）"},
      },
      {
        name: "42选区代表联系点",
        type:4,
        data: {"email": "hhrdgw@163.com", "phone": "63873949", "addr": "建六活动室（马当路357弄1号）"},
      },
      {
        name: "43选区代表联系点",
        type:4,
        data: {"email": "hhrdgw@163.com", "phone": "63845087", "addr": "复兴活动室（马当路301弄25号103室）"},
      },
      {
        name: "44选区代表联系点",
        type:4,
        data: {"email": "hhrdgw@163.com", "phone": "63873949", "addr": "孝和活动室（淡水路89弄9号）"},
      },
      {
        name: "45选区代表联系点",
        type:4,
        data: {"email": "hhrdgw@163.com", "phone": "63289068", "addr": "志成活动室（肇周路126弄7号）"},
      },
      {
        name: "46选区代表联系点",
        type:4,
        data: {"email": "hhrdgw@163.com", "phone": "63861412", "addr": "复四活动室（淡水路214弄98号-1）"},
      },
      {
        name: "47选区代表联系点",
        type:4,
        data: {"email": "hhrdgw@163.com", "phone": "53066279", "addr": "新华活动室（普安路128号705室）"},
      },
      {
        name: "48选区代表联系点",
        type:4,
        data: {"email": "hhrdgw@163.com", "phone": "63288816", "addr": "西成活动室（马当路438弄42号）"},
      },
      {
        name: "豫园代表之家",
        type:5,
        data: {"email": "yyrdgw@163.com", "phone": "63203831、63203831", "addr": "傅家街65号4楼"},
      },
      {
        name: "豫园代表联络站",
        type:5,
        data: {"email": "yyrdgw@163.com", "phone": "63203831、33070198", "addr": "福佑路225号福佑商厦6楼"},
      },
      {
        name: "四新联系点",
        type:5,
        data: {"email": "yyrdgw@163.com", "phone": "63281878", "addr": "四牌楼路168弄9号"},
      },
      {
        name: "学院联系点",
        type:5,
        data: {"email": "yyrdgw@163.com", "phone": "63289770", "addr": "盛家街65号"},
      },
      {
        name: "露香联系点",
        type:5,
        data: {"email": "yyrdgw@163.com", "phone": "63288307", "addr": "柳泉弄26号"},
      },
      {
        name: "方西联系点",
        type:5,
        data: {"email": "yyrdgw@163.com", "phone": "63284714", "addr": "方浜西路63弄10号"},
      },
      {
        name: "打浦桥街道代表之家",
        type:6,
        data: {"email": "664914959@qq.com", "phone": "63041102*8513、63034492*8013", "addr": "蒙自路223号三楼"},
      },
      {
        name: "田子坊园区人大代表联络站",
        type:6,
        data: {"email": "dpqqtfwz@163.com", "phone": "64399350", "addr": "泰康路176号2楼"},
      },
      {
        name: "上海巴士第四公交公司人大代表联络站",
        type:6,
        data: {"email": "dpqrdllz@163.com", "phone": "63862082", "addr": "重庆南路275号507室"},
      },
      {
        name: "59选区人大代表联系点",
        type:6,
        data: {"email": "datongjuweihui@163.com", "phone": "63044513", "addr": "鲁班路168弄6号101室大同之家"},
      },
      {
        name: "60选区人大代表联系点",
        type:6,
        data: {"email": "1951534006@qq.com", "phone": "64730300", "addr": "徐家汇路454弄46号101室乙底楼"},
      },
      {
        name: "61选区人大代表联系点",
        type:6,
        data: {"email": "kxfzg200909@163.com", "phone": "63855034", "addr": "徐家汇路388号104室"},
      },
      {
        name: "62选区人大代表联系点",
        type:6,
        data: {"email": "lier_juwei@163.com", "phone": "63013233", "addr": "丽园路710弄10号二楼"},
      },
      {
        name: "63选区人大代表联系点",
        type:6,
        data: {"email": "mengxijuwei@163.com", "phone": "63059578", "addr": "蒙自西路50号"},
      },
      {
        name: "64选区人大代表联系点",
        type:6,
        data: {"email": "triangel_zm@126.com", "phone": "63011296", "addr": "徐家汇路1弄3号101后门"},
      },
      {
        name: "65选区人大代表联系点",
        type:6,
        data: {"email": "jinhaijuweihui2022@163.com", "phone": "63035505", "addr": "打浦路90弄1号104-105室"},
      },
      {
        name: "66选区人大代表联系点",
        type:6,
        data: {"email": "liyijuwei@163.com", "phone": "53075072", "addr": "制造局路208弄2号102室"},
      },
      {
        name: "67选区人大代表联系点",
        type:6,
        data: {"email": "yinxingjuweihui@163.com", "phone": "63013352", "addr": "鲁班路277弄9号102室"},
      },
      {
        name: "老西门街道代表之家",
        type:7,
        data: {"email": "ljdrdgw@hpq.sh.cn", "phone": "63696363*4093", "addr": "方斜路238号二楼"},
      },
      {
        name: "老西门街道代表联络站",
        type:7,
        data: {"email": "ljdrdgw@hpq.sh.cn", "phone": "63696363*4093", "addr": "梦花街65号"},
      },
      {
        name: "第68选区代表联系点",
        type:7,
        data: {"email": "ljdrdgw@hpq.sh.cn", "phone": "53570040", "addr": "中华路868弄30号103室"},
      },
      {
        name: "第69选区代表联系点",
        type:7,
        data: {"email": "ljdrdgw@hpq.sh.cn", "phone": "53570040", "addr": "蓬莱路374号"},
      },
      {
        name: "第70选区代表联系点",
        type:7,
        data: {"email": "ljdrdgw@hpq.sh.cn", "phone": "53570295", "addr": "江阴街168号"},
      },
      {
        name: "第71选区代表联系点",
        type:7,
        data: {"email": "ljdrdgw@hpq.sh.cn", "phone": "33180627", "addr": "大吉路186号"},
      },
      {
        name: "第72选区代表联系点",
        type:7,
        data: {"email": "ljdrdgw@hpq.sh.cn", "phone": "63150813", "addr": "大吉路281号"},
      },
      {
        name: "第73选区代表联系点",
        type:7,
        data: {"email": "ljdrdgw@hpq.sh.cn", "phone": "33050214", "addr": "梦花街65号"},
      },
      {
        name: "第74选区代表联系点",
        type:7,
        data: {"email": "ljdrdgw@hpq.sh.cn", "phone": "53570564", "addr": "尚文路133弄96号"},
      },
      {
        name: "第75选区代表联系点",
        type:7,
        data: {"email": "ljdrdgw@hpq.sh.cn", "phone": "33050034", "addr": "学西街19号"},
      },
      {
        name: "小东门人大代表之家",
        type:8,
        data: {"email": "xjdrdgw@163.com", "phone": "63325826", "addr": "白渡路252号2楼"},
      },
      {
        name: "久事大厦联络站（楼宇）",
        type:8,
        data: {"email": "xjdrdgw@163.com", "phone": "63325843", "addr": "中山南路28号2楼"},
      },
      {
        name: "金坛居民区人大代表联系点",
        type:8,
        data: {"email": "xjdrdgw@163.com", "phone": "53570112", "addr": "金坛路35弄13号"},
      },
      {
        name: "白渡居民区人大代表联系点",
        type:8,
        data: {"email": "xjdrdgw@163.com", "phone": "63322553", "addr": "白渡路308号"},
      },
      {
        name: "中华居民区人大代表联系点",
        type:8,
        data: {"email": "xjdrdgw@163.com", "phone": "53580156", "addr": "中华路211弄4号"},
      },
      {
        name: "龙潭居民区人大代表联系点",
        type:8,
        data: {"email": "xjdrdgw@163.com", "phone": "63322576", "addr": "外咸瓜街223号101室"},
      },
      {
        name: "新码居民区人大代表联系点",
        type:8,
        data: {"email": "xjdrdgw@163.com", "phone": "33150012", "addr": "白渡路308号"},
      },
      {
        name: "多稼居民区人大代表联系点",
        type:8,
        data: {"email": "xjdrdgw@163.com", "phone": "33766298", "addr": "陆家浜路457号"},
      },
      {
        name: "阳光居民区人大代表联系点",
        type:8,
        data: {"email": "xjdrdgw@163.com", "phone": "63771804", "addr": "南仓街183号"},
      },
      {
        name: "桑园居民区人大代表联系点",
        type:8,
        data: {"email": "xjdrdgw@163.com", "phone": "63770217", "addr": "中华路622号2楼"},
      },
      {
        name: "五里桥街道人大代表之家",
        type:9,
        data: {"email": "wlqrddb@163.com", "phone": "63043853", "addr": "局门路425号"},
      },
      {
        name: "五里桥街道代表联络站",
        type:9,
        data: {"email": "wlqrddb@163.com", "phone": "63043853", "addr": "瞿溪路883号"},
      },
      {
        name: "铁一居民区人大代表联络点",
        type:9,
        data: {"email": "wlqrddb@163.com", "phone": "63137540", "addr": "中山南一路468号甲"},
      },
      {
        name: "桑城居民区人大代表联络点",
        type:9,
        data: {"email": "wlqrddb@163.com", "phone": "63044312", "addr": "局门路295弄4号甲"},
      },
      {
        name: "中二居民区人大代表联络点",
        type:9,
        data: {"email": "wlqrddb@163.com", "phone": "53073741", "addr": "瞿溪路653号"},
      },
      {
        name: "紫荆居民区人大代表联络点",
        type:9,
        data: {"email": "wlqrddb@163.com", "phone": "63149207", "addr": "富润路177弄10号居委活动室"},
      },
      {
        name: "瞿中居民区人大代表联络点",
        type:9,
        data: {"email": "wlqrddb@163.com", "phone": "63049814", "addr": "瞿溪路1111弄28号"},
      },
      {
        name: "瞿西居民区人大代表联络点",
        type:9,
        data: {"email": "wlqrddb@163.com", "phone": "63032609", "addr": "中山南一路1107弄边门"},
      },
      {
        name: "瑞南居民区人大代表联络点",
        type:9,
        data: {"email": "wlqrddb@163.com", "phone": "63031209", "addr": "瑞金南路185弄1号103室"},
      },
      {
        name: "桥二居民区人大代表联络点",
        type:9,
        data: {"email": "wlqrddb@163.com", "phone": "63017245", "addr": "斜土路280号"},
      },
      {
        name: "海悦居民区人大代表联络点",
        type:9,
        data: {"email": "wlqrddb@163.com", "phone": "63050487", "addr": "鲁班路388弄1号楼202室"},
      },
      {
        name: "瞿南居民区人大代表联络点",
        type:9,
        data: {"email": "wlqrddb@163.com", "phone": "63024291", "addr": "瞿溪路1072/8号(甲)二楼"},
      },
      {
        name: "半淞园路街道人大代表之家",
        type:10,
        data: {"email": "bsyrdgw@163.com", "phone": "63120055*7201", "addr": "保屯路212号"},
      },
      {
        name: "商业会计学校人大代表联络站",
        type:10,
        data: {"email": "bsyrdgw@163.com", "phone": "63779321", "addr": "迎勋路168号14楼"},
      },
      {
        name: "95选区人大代表联系点",
        type:10,
        data: {"email": "bsyrdgw@163.com", "phone": "33183245", "addr": "制造居委会（西藏南路1188号）"},
      },
      {
        name: "96选区人大代表联系点",
        type:10,
        data: {"email": "bsyrdgw@163.com", "phone": "33183344", "addr": "西二居委会活动室（西藏南路1374弄51号）"},
      },
      {
        name: "97选区人大代表联系点",
        type:10,
        data: {"email": "bsyrdgw@163.com", "phone": "53590307", "addr": "高雄居委会（中山南一路270号）"},
      },
      {
        name: "98选区人大代表联系点",
        type:10,
        data: {"email": "bsyrdgw@163.com", "phone": "53570287", "addr": "三门居委会（南车站路52号）"},
      },
      {
        name: "99选区人大代表联系点",
        type:10,
        data: {"email": "bsyrdgw@163.com", "phone": "33183215", "addr": "保屯居委会（斜土东路58号）"},
      },
      {
        name: "100选区人大代表联系点",
        type:10,
        data: {"email": "bsyrdgw@163.com", "phone": "53590145", "addr": "耀江花园居委会（半淞园路619号）"},
      },
      {
        name: "101选区人大代表联系点",
        type:10,
        data: {"email": "bsyrdgw@163.com", "phone": "53590114", "addr": "新村居委会活动室（瞿溪路120弄17号对面）"},
      },
      {
        name: "102选区人大代表联系点",
        type:10,
        data: {"email": "bsyrdgw@163.com", "phone": "63145384", "addr": "中福二居委会（海潮路23号307楼）"},
      },
      {
        name: "瑞金二路街道“代表之家”",
        type:3,
        data: {"email": "hprjdjb@126.com", "phone": "63866900", "addr": "思南路33号三楼"},
      },
      {
        name: "街道文化中心人大代表联络站",
        type:3,
        data: {"email": "hprjdjb@126.com", "phone": "63866900", "addr": "陕西南路245号"},
      },
      {
        name: "新华联人大代表联络站",
        type:3,
        data: {"email": "hprjdjb@126.com", "phone": "63858668", "addr": "淮海中路755号"},
      },
      {
        name: "31选区人大代表联系点",
        type:3,
        data: {"email": "hprjdjb@126.com", "phone": "62584697", "addr": "延安中路531号"},
      },
      {
        name: "32选区人大代表联系点",
        type:3,
        data: {"email": "hprjdjb@126.com", "phone": "64741781", "addr": "茂名南路169弄14号"},
      },
      {
        name: "33、36选区人大代表联系点",
        type:3,
        data: {"email": "hprjdjb@126.com", "phone": "53832699", "addr": "淮海中路622弄4号"},
      },
      {
        name: "34、35选区人大代表联系点",
        type:3,
        data: {"email": "hprjdjb@126.com", "phone": "64371568", "addr": "淮海中路927弄86号"},
      },
      {
        name: "37选区人大代表联系点",
        type:3,
        data: {"email": "hprjdjb@126.com", "phone": "64724651", "addr": "永嘉路19弄8号"},
      },
      {
        name: "38、39选区人大代表联系点 ",
        type:3,
        data: {"email": "hprjdjb@126.com", "phone": "64730567", "addr": "建德路1号3号楼102室"},
      }
    ]
    const onConfirm = (value) => {
      form.value.tableText = value.text;
      form.value.tableId = value.value;
      showPicker.value = false;
    };
    const condeTupian = ref(null)
    const handleClick = ()=>{
      condeTupian.value.start();
    }
    const onSubmit = (values) => {
      console.log('submit', values);
      if(values.sms === condeTupian.value.code){
        values.tableId = form.value.tableId
        const apiUrl = await configManager.getApiBaseUrl();
        axios.post(apiUrl,values)
            .then(() => (Toast.success('提交成功'),active.value = 0))
            .catch(function (error) { // 请求失败处理
              console.log(error);
              Toast.success('提交成功')
            });
      }else{
        Toast.fail('请正确填写图文验证码');
      }

    };
    const onShowIma = (values) => {
      ImagePreview([values]);
    };
    const onShowData = (values) => {
      list.value = dataAll.filter(v=> v.type===values)
      activeNames.value = []
      imgUrl.value = imgList.value[values-1]
      console.log(imgUrl.value,values)
    };
    return {
      active,
      form,
      result,
      list,
      street,sms,
      dataAll,
      activeNames,
      imgUrl,
      imgList,
      root,
      condeTupian,
      columns,
      showPicker,
      onShowData,
      handleClick,
      onConfirm,
      onSubmit,
      onShowIma,
    };
  },
}
</script>

<style scoped>
::v-deep(.van-cell__title){
  text-align: left;
}
.text-right{
  text-align: right;
  color:#666
}
</style>